<template>
	<view class="container">
		<!-- 新增：类型切换 -->
		<view class="type-tabs">
			<view 
				class="tab-item" 
				:class="{ active: activeType === 'buy' }" 
				@click="switchType('buy')"
			>
				购买商品
			</view>
			<view 
				class="tab-item" 
				:class="{ active: activeType === 'recycle' }" 
				@click="switchType('recycle')"
			>
				回收商品
			</view>
		</view>

		<view class="list">
			<view class="item u-flex u-col-center u-row-between" v-for="(item,index) in filteredList" :key="index">
				<view class="l" @click="change(item,index)">
					<image src="../../static/image/c2.png" mode="aspectFill" v-if="item.isSet"></image>
					<image src="../../static/image/c1.png" mode="aspectFill" v-else></image>
				</view>
				<view class="r u-flex u-col-center u-row-between">
					<view class="img">
						<image :src="http + item.image" mode="aspectFill"></image>
					</view>
					<view class="con">
						<view class="title u-flex u-col-center u-row-between">
							<view class="tl u-line-1">
								{{item.title}}
							</view>
							<view class="tr">
								{{item.price - item.mountings_price}}元
							</view>
						</view>
						<view class="tips mt10">
							<text v-for="(item2,index2) in item.spec" :key="index2">{{item2}}</text>
							<text v-for="(item2,index2) in item.mountings_text" :key="index2">{{item2.title}}-{{item2.intro}}</text>
						</view>
						<view class="num mt20 u-flex u-col-center u-row-right">
							<u-number-box v-model="item.num" ></u-number-box>
						</view>
					</view>
				</view>
			</view>
			<view class="nolist" v-if="filteredList.length==0">
				<u-empty mode="car" :text="emptyText">
				</u-empty>
			</view>
		</view>
		<view class="footer  u-flex u-col-center u-row-between" v-if="filteredList.length>0">
			<view class="l u-flex u-col-center" @click="changeAll">
				<image src="../../static/image/c2.png" mode="aspectFill" v-if="isSetAll"></image>
				<image src="../../static/image/c1.png" mode="aspectFill" v-else></image>
				<text>{{isSetAll?'取消':'全选'}}</text>
			</view>
			<view class="del" @click="delCart">
				删除选中
			</view>
			<view class="r" @click="goBuy">
				{{ activeType === 'buy' ? '立即购买' : '下单回收' }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSetAll: false,
				list: [],
				http: this.$imgUrl,
				activeType: 'buy', // 默认选中购买
			}
		},
		computed: {
			// 根据类型过滤列表
			filteredList() {
				return this.list.filter(item => {
					// 根据 product_type 字段过滤
					if (this.activeType === 'buy') {
						return item.product_type === 'buy';
					} else {
						return item.product_type === 'recycle';
					}
				});
			},
			// 空状态提示文字
			emptyText() {
				return this.activeType === 'buy' ? '暂无购买商品' : '暂无回收商品';
			}
		},
		onLoad(o) {
			my.setNavigationBar({
			  frontColor: '#000',
			  backgroundColor: '#fff',
			})
		},
		onShow() {
			this.loadCartData();
		},
		methods: {
			// 加载购物车数据
			loadCartData() {
				this.list = uni.getStorageSync('cart') || [];
				if(this.list.length>0){
					this.list.forEach(item => item.isSet = false);
				}
				this.isSetAll = false;
			},
			
			// 切换类型
			switchType(type) {
				this.activeType = type;
				this.isSetAll = false;
				// 重置选中状态
				this.list.forEach(item => item.isSet = false);
			},
			
			delCart() {
				let list = this.filteredList.filter(item => item.isSet);
				if (list.length == 0) {
					uni.showToast({
						title: '至少选一个',
						icon: "none"
					});
					return;
				}
				
				// 从原始列表中删除选中的项目
				this.list = this.list.filter(item => {
					if (item.isSet && 
						((this.activeType === 'buy' && item.product_type === 'buy') || 
						 (this.activeType === 'recycle' && item.product_type === 'recycle'))) {
						return false;
					}
					return true;
				});
				
				uni.setStorageSync('cart', JSON.parse(JSON.stringify(this.list)));
				uni.showToast({
					title: '删除成功',
					icon: "none"
				});
			},
			
			goBuy(){
				let list = this.filteredList.filter(item => item.isSet);
				if (list.length == 0) {
					uni.showToast({
						title: '至少选一个',
						icon: "none"
					});
					return;
				}
				uni.setStorageSync('cart2', JSON.parse(JSON.stringify(list)));
				
				// 根据类型跳转到不同页面
				if (this.activeType === 'buy') {
					uni.navigateTo({
						url: '/pages/index/buy1' // 购买订单页面
					});
				} else {
					uni.navigateTo({
						url: '/pages/index/buy' // 回收订单页面
					});
				}
			},
			
			change(item, index) {
				item.isSet = !item.isSet;
				// 只检查当前类型的全选状态
				this.isSetAll = this.filteredList.every(item => item.isSet);
				this.$forceUpdate();
			},
			
			changeAll() {
				this.isSetAll = !this.isSetAll;
				// 只设置当前类型的选中状态
				this.filteredList.forEach(item => item.isSet = this.isSetAll);
			},
			
			wxlogin() {
				uni.login({
					provider: 'weixin',
					success: (data) => {
						this.code = data.code;
						this.$http.post('/api/user/wxLogin', {
							code: data.code,
							admin_id: this.admin_id
						}).then(res2 => {
							if (res2.code == 1) {
								uni.setStorageSync('token', res2.data.userinfo.token);
								uni.setStorageSync('userId', res2.data.userinfo.user_id);
								let loginTime = new Date().getTime();
								uni.setStorageSync('loginTime', loginTime);
								this.getSystemConfig();
								uni.showToast({
									title: '登录成功',
									icon: "none",
									duration: 1500
								});
							} else {
								uni.showToast({
									title: res2.msg,
									icon: "none"
								});
							}
						}).catch(err2 => {
							console.log('表单错误信息：', err2);
						});
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	@color: #E31D21;

	.container {
		padding: 30rpx 30rpx 150rpx;
	}

	/* 新增：类型切换样式 */
	.type-tabs {
		display: flex;
		background: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		padding: 10rpx;
		.tab-item {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			font-size: 28rpx;
			color: #666;
			border-radius: 8rpx;
			transition: all 0.3s;
			
			&.active {
				background: @color;
				color: #fff;
				font-weight: 600;
			}
		}
	}

	.list {
		.item {
			padding: 20rpx;
			border-radius: 10rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			.l {
				width: 50rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				text-align: center;
				justify-content: center;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.r {
				margin-left: 20rpx;
				flex: 1;
				width: 1rpx;

				.img {
					width: 150rpx;
					height: 241rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.con {
					padding-left: 20rpx;
					flex: 1;
					width: 1rpx;
					.title {
						line-height: 40rpx;

						.tl {
							font-size: 30rpx;
							color: #333;
						}

						.tr {
							font-size: 24rpx;
							color: @color;
							font-weight: 600;
							width: 120rpx;
							text-align: right;
						}
					}

					.tips {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						text {
							height: 30rpx;
							line-height: 30rpx;
							padding: 0 10rpx;
							font-size: 20rpx;
							color: #666;
							margin: 10rpx 10rpx 0 0;
						}
					}
				}
			}
		}
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 30rpx;
		background-color: #fff;
		z-index: 999;
		height: 80rpx;

		.l {
			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;
			}

			text {
				font-size: 26rpx;
				color: #666;
				margin-left: 10rpx;
			}
		}

		.del {
			margin-left: 20rpx;
			flex: 1;
			width: 1rpx;
			color: @color;
			font-size: 26rpx;
		}

		.r {
			width: 180rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			background-color: @color;
			border-radius: 30rpx;
		}
	}
</style>